<template>
  <div>
    <div style="width: 100%;float:left;">
      <van-nav-bar
          title="修改密码"
          left-arrow
          @click-left="onClickLeft"
      />
    </div>

    <div align="left" style="width: 100%;">
      <div class="login-container">
        <p style="width: 80%;">新密码:</p>
        <el-input v-model="form.newPassword1" placeholder="请输入新密码" style="width: 80%;margin: 10px auto;"/>
      </div>
      <div class="login-container">
        <p style="width: 80%;">再次输入新密码:</p>
        <el-input v-model="form.newPassword2" placeholder="请再次输入新密码" style="width: 80%;margin: 10px auto;"/>
      </div>
      <div class="login-container" style="margin-top: 20px">
        <el-button type="primary" @click="onSubmit" style="width: 80%;margin: 10px auto;">确定</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "UpdatePasswordView",
  data() {
    return {
      id: '',
      form: {
        newPassword1: '',
        newPassword2: ''
      }
    }
  },
  created() {
    this.id = this.$route.query.id;
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1)
    },
    onSubmit() {
      if (this.form.newPassword1 == '' || this.form.newPassword2 == ''){
        this.$message.error("密码不能为空")
        return
      }
      if (this.form.newPassword1 != this.form.newPassword2) {
        this.$message.error("两次密码不一致")
        return
      }
      this.axios.get(`http://localhost:10086/api/user/user/updatePassword/` + this.form.newPassword1 + "/" + this.form.newPassword2 + "/" + this.id).then(res => {
        if (res.data.code == 200) {
          this.$message.success("修改成功")
          this.$router.push({name: 'login2'})
        } else {
          this.$message.error(res.data.message)
        }
      })
    }
  }
}
</script>

<style>
.login-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
</style>